/**
 * 组件：Loading.jsx
 * 作用：封装用于复用的加载中提示组件
 * 注意点：
 *      对于封装的组件要注意其良好的通用性及可以执行。
 * 
 */
import React, { Component } from 'react';
import {Spin} from "antd"
import styled from 'styled-components';

class Loading extends Component {
    static defaultprops = {
        tip:"加载中...",
        spinning:true
    }
    render() {
        return (
            <div>
                <Main>
                    <Spin size='large' spinning={this.props.spinning} tip={this.props.tip}/>
                </Main>
                
            </div>
        );
    }
}

// 编写样式，让其居中，在设置高度100%的时候需要注意也同时设置其父级元素高度也为100%
const Main = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
`

export default Loading;
